<template>
  <div class="contain">
    <div class="logo fixMagrin">Luo.jz</div>
    <div class="description subTitle">由以下</div>
    <div class="description">
      Electron + Rollup + Vite2 + Vue3.0 + Typescript
    </div>
    <div class="description subTitle">集成的跨平台桌面应用程序</div>
    <div class="fixMagrin">
      <el-button type="primary" size="mini" @click="openSubWin()"
        >打开子窗口</el-button
      >
      <el-button type="primary" size="mini" @click="getWeather()"
        >获得天气</el-button
      >
    </div>
    <div class="description subTitle">
      当前城市:{{ city || "未指定" }} 气温:{{ temperature || "未指定" }}
    </div>
    <div class="description subTitle storeGrid">
      使用者:
      <el-input v-model="word" size="mini" placeholder="请输入内容" />
      <el-button type="primary" size="mini" @click="getStoreValue()"
        >获得electron存的值</el-button
      ><el-button type="primary" size="mini" @click="setStoreValue()"
        >设置electron存的值</el-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import store from "@render/store";
import { testApi } from "@render/api/test";
import { ref } from "@vue/runtime-core";
const { ipcRenderer } = require("electron");

const city = ref<string>();
const temperature = ref<number>();
const word = ref<string>("");

const openSubWin = () => {
  ipcRenderer.send("creatSubWin");
};

const getWeather = () => {
  testApi({
    city: "深圳",
  }).then((Response) => {
    const result: { city: string; wendu: number } = Response.data;
    city.value = result.city;
    temperature.value = result.wendu;
  });
};

const getStoreValue = () => {
  word.value = store.getValue("userName");
};
const setStoreValue = () => {
  store.setValue("userName", word.value);
};
</script>
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f5;
  .logo {
    width: 400px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 100px;
    background-color: #409eff;
    border-radius: 25px;
    box-shadow: 0 0 5px 5px #dcdfe6;
    color: #fff;
    text-shadow: 0 0 5px #303133;
  }
  .description {
    font-size: 30px;
    font-weight: bold;
    margin: 5px 0;
  }
  .subTitle {
    color: #606266;
    font-size: 18px;
  }
  .fixMagrin {
    margin: 5px;
  }

  .storeGrid {
    display: grid;
    grid-template-columns: 65px 150px 150px 150px;
    gap: 20px;
    align-items: center;
  }
}
</style>
